<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
      <el-form-item label="项目名称" prop="projectId">

        <el-select
          v-model="queryParams.projectId"
          clearable
          :loading="loading">
          <el-option
              v-for="item in projectOptions"
              :key="item.value"
              :label="item.projectName"
              :value="item.projectId">
            </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="工作流名称" prop="workflowId">
        <el-input
          v-model="queryParams.workflowId"
          placeholder="请输入工作流名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="执行人" prop="excutePerson">
        <el-input
          v-model="queryParams.excutePerson"
          placeholder="请输入执行人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['business:my_bid_project_process:add']"
        >新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['business:bid_project_process:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['business:bid_project_process:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['business:bid_project_process:export']"
        >导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="bid_project_processList" :row-key="(row)=>row.processId"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :span-method="arraySpanMethod">
      <el-table-column label="工程名称" align="left" header-align="center" prop="projectName" />
      <el-table-column label="节点名称" align="left" header-align="center" prop="pointName" >
        <template slot-scope="scope">
          <span v-if="scope.row.creator!=null">{{scope.row.pointName}}</span>
          <el-steps v-if="scope.row.creator==null" :process-status="scope.row.stepStatus" :active="scope.row.step" finish-status="success" align-center>
              <el-step :title="name" v-for="(name, index) in scope.row.pointName.split(',')" :key="index + '-only'">
              </el-step>
          </el-steps>
        </template>
      </el-table-column>
      <el-table-column label="执行" align="left" prop="pointOrder" >
        <template slot-scope="scope">
          <svg-icon style="width:25px;height:25px;" v-if="scope.row.step ==1" icon-class="nextstep" class-name="down-arrow" ></svg-icon>
          <svg-icon style="width:25px;height:25px;" v-if="scope.row.step ==-1" icon-class="forbiden" class-name="forbiden" ></svg-icon>
          <svg-icon style="width:25px;height:25px;" v-if="scope.row.step ==0" icon-class="tobe" class-name="tobe" ></svg-icon>
        </template>
      </el-table-column>
      <el-table-column label="执行/审核时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.step ==1">{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="执行/审核人" align="center" prop="creator" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleApprove(scope.row)"
            v-if="scope.row.creator ==null?true:false"
          >执行/审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改项目投标执行对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">

        <el-form-item label="项目名称" prop="projectId">
          <el-select
            v-model="form.projectId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入项目名称"
            :remote-method="getBidProjectList"
            :loading="loading">
            <el-option
              v-for="item in tobeBidOptions"
              :key="item.value"
              :label="item.projectName"
              :value="item.projectId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="执行时间">
          <el-date-picker
            v-model="form.excuteTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="佐证材料">
          <FileUpload
            v-model="form.filePath" >
          </FileUpload>
        </el-form-item>
        <el-form-item label="工作流名称">
          <el-tag type="info">{{form.workflowName}}</el-tag>
        </el-form-item>

          <el-steps finish-status="success" process-status="finish">
              <el-step :title="item.pointName"
              :key="item.pointId" v-for="item in form.bidProjectWorkflowPointList">
              </el-step>
          </el-steps>

        <el-input v-if="false" v-model="form.workflowId"/>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog title="审核" :visible.sync="checkOpen" width="400px" append-to-body>
      <el-row :gutter="20">
        <el-col :span="12" style="text-align:center">
            <el-button type="primary" @click="checkYes">审核通过</el-button>
        </el-col>
        <el-col :span="12" style="text-align:center">
            <el-button type="danger"  @click="checkNo">审核不通过</el-button>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="checkOpen = false">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 添加或修改项目投标执行对话框 -->
    <el-dialog :title="approveTitle" :visible.sync="openApprove" width="800px" append-to-body>
      <el-form ref="approveForm" :model="approveForm" label-width="100px">
          <el-steps :active="active" finish-status="success" :process-status="processStatus">
              <el-step :title="item.pointName"
              :key="item.pointId" v-for="item in singleStepData">
              </el-step>
          </el-steps>
          <el-input v-if=false v-model="approveForm.projectId" />
          <el-input v-if=false v-model="approveForm.workflowId"/>
          <el-input v-if=false v-model="approveForm.bidProjectWorkflowPointList"/>
        <el-button  type="success" style="margin-top: 12px;" v-show="(active < singleStepData.length)&&processStatus=='finish'&&auditorPermi=='true'"
          @click="back" v-hasPermi="['business:my_bid_project_process:check']">审核</el-button>
        <el-button type="primary" style="margin-top: 12px;" v-show="(active < singleStepData.length)&&processStatus!='finish'&&creatorPermi=='true'"
           @click="next" v-hasPermi="['business:my_bid_project_process:execute']">执行</el-button>
        <span v-if="(active < singleStepData.length)&&processStatus!='finish'" style="margin-left:20px;margin-right:10px;">执行时间</span>
          <el-date-picker
          v-if="(active < singleStepData.length)&&processStatus!='finish'"
          value-format="yyyy-MM-dd"
            v-model="approveForm.excuteTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        <!-- <el-checkbox v-if="approveForm.workflowStatus == '0' && active < singleStepData.length" v-model="approveForm.isBid" style="margin-left:20px;">是否为确认中标状态</el-checkbox>
        <span v-if="approveForm.workflowStatus == '1'" style="color:red;font-size:8px;">
            &nbsp;&nbsp;&nbsp;&nbsp;
            <i class="el-icon-question"></i>
            该工程已经是中标状态
          </span> -->



      <el-tabs v-model="activeName">
        <el-tab-pane label="佐证材料" name="first">
          <FileUploadLayne
            v-model="fileList"
            :projectPointId="singleStepData[active]?singleStepData[active].pointId:0"
            ></FileUploadLayne>
          </el-tab-pane>
          <el-tab-pane label="执行历史记录" name="second">
            <el-table v-loading="loading" :data="only_bid_project_processList" >
              <el-table-column label="节点名称" align="center" prop="pointName" />
              <el-table-column label="操作" align="center" prop="pointOrder"  style="padding:0px;">
                <template slot-scope="scope">
                  <!-- <svg-icon v-if="scope.row.step ==-1" icon-class="backstep" class-name="up-arrow" ></svg-icon> -->
                  <svg-icon style="width:25px;height:25px;" v-if="scope.row.step ==1" icon-class="nextstep" class-name="down-arrow" ></svg-icon>
                  <svg-icon style="width:25px;height:25px;" v-if="scope.row.step ==-1" icon-class="forbiden" class-name="forbiden" ></svg-icon>
                  <svg-icon style="width:25px;height:25px;" v-if="scope.row.step ==0" icon-class="tobe" class-name="tobe" ></svg-icon>
                </template>
              </el-table-column>
              <el-table-column label="执行/审核时间" align="center" prop="excuteTime" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.excuteTime, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="执行/审核人" align="center" prop="creator" />
            </el-table>

            <pagination
              v-show="only_total>0"
              :total="only_total"
              :page.sync="queryOnlyListParams.pageNum"
              :limit.sync="queryOnlyListParams.pageSize"
              @pagination="getOnlyList"
            />
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { listBid_project_options } from "@/api/business/my_bid_project";

import { listBid_project_process, listonlyBid_project_process,activeBid_project_process, getBid_project_process,getBid_project_process_step, delBid_project_process, addBid_project_process,checkBid_project_process, updateBid_project_process } from "@/api/business/my_bid_project_process";
import { listBid_project_workflow,getBid_project_workflow,getActive_workflow } from "@/api/business/bid_project_workflow";
import FileUpload from "../../../components/FileUpload/index.vue";
export default {
    name: "Bid_project_process",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            activeName: "first",
            // 总条数
            total: 0,
            // 项目投标执行表格数据
            bid_project_processList: [],
            only_total: 0,
            only_bid_project_processList: [],
            // 弹出层标题
            title: "",
            approveTitle: "",
            // 是否显示弹出层
            open: false,
            openApprove: false,
            checkOpen: false,
            processStatus: "info",
            singleStepData: [],
            fileList: "",
            active: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                projectId: null,
                workflowId: null,
                pointId: null,
                pointName: null,
                pointOrder: null,
                revokeTime: null,
                revokePerson: null,
                excuteTime: null,
                excutePerson: null,
            },
            // 查询参数
            queryOnlyListParams: {
                pageNum: 1,
                pageSize: 10,
                projectId: null,
            },
            workflowOptions: [],
            //竞争企业查询参数
            queryBidProjectWorkflowParams: {
                pageNum: 1,
                pageSize: 10,
                workflowName: null,
            },
            workflowOption: {
                workflowId: null,
                workflowName: null,
            },
            projectOptions: [],
            tobeBidOptions: [],
            //竞争企业查询参数
            queryBidProjectParams: {
                pageNum: 1,
                pageSize: 10,
                projectName: null,
            },
            projectOption: {
                projectId: null,
                projectName: null,
            },
            // 表单参数
            form: {},
            approveForm: {},
            // 表单校验
            rules: {
                projectId: [
                    { required: true, message: "项目ID不能为空", trigger: "blur" }
                ],
                workflowId: [
                    { required: true, message: "工作流ID不能为空", trigger: "blur" }
                ],
                pointId: [
                    { required: true, message: "节点ID不能为空", trigger: "blur" }
                ],
                pointName: [
                    { required: true, message: "节点名称不能为空", trigger: "blur" }
                ]
            },
        };
    },
    created() {
        this.getList();
        listBid_project_options().then(response => {
            this.projectOptions = response.rows;
        });
    },
    methods: {
        /** 查询项目投标执行列表 */
        getList() {
            this.loading = true;
            listBid_project_process(this.queryParams).then(response => {
                this.bid_project_processList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 仅仅查询项目投标执行列表 */
        getOnlyList() {
            this.loading = true;
            listonlyBid_project_process(this.queryOnlyListParams).then(response => {
                this.only_bid_project_processList = response.rows;
                this.only_total = response.total;
                this.loading = false;
            });
        },
        getBidProjectWorkflowList(query) {
            if (query !== "") {
                this.loading = true;
                this.queryBidProjectWorkflowParams.workflowName = query;
                listBid_project_workflow(this.queryBidProjectWorkflowParams).then(response => {
                    this.loading = false;
                    this.workflowOptions = response.rows;
                });
            }
            else {
                this.workflowOptions = [];
            }
        },
        getFirstWorkflowById(pointItem) {
            getBid_project_workflow(pointItem).then(response => {
                var bidProjectWorkflowPointList = response.data.bidProjectWorkflowPointList;
                //获取第一个节点，其实后台如果只返回一个就更好
                this.form.pointId = bidProjectWorkflowPointList[0].pointId;
                this.form.pointName = bidProjectWorkflowPointList[0].pointName;
                this.form.pointOrder = bidProjectWorkflowPointList[0].pointOrder;
            });
        },
        getBidProjectList(query) {
            if (query !== "") {
                this.loading = true;
                this.queryBidProjectParams.projectName = query;
                listBid_project_options({ "bidStatus": 0, "projectName": query }).then(response => {
                    this.loading = false;
                    this.projectOptions = response.rows;
                });
            }
            else {
                this.projectOptions = [];
            }
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (row.creator == null) {
                if (columnIndex === 1) {
                    return [1, 4];
                }
                else if (1 < columnIndex && columnIndex < 5) {
                    return [1, 0];
                }
            }
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                processId: null,
                projectId: null,
                workflowId: null,
                pointId: null,
                pointName: null,
                pointOrder: null,
                revokeTime: null,
                revokePerson: null,
                excuteTime: null,
                excutePerson: null,
                creator: null,
                createTime: null,
                workflowOptions: [],
                projectOptions: [],
                tobeBidOptions: [],
                remark: null,
                filePath: "",
                processStatus: "info",
                checkOpen: false
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.processId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.loading = true;
            listBid_project_options({ "bidStatus": 0 }).then(response => {
                this.loading = false;
                this.tobeBidOptions = response.rows;
            });
            getActive_workflow().then(response => {
                this.loading = false;
                this.form = response.data;
                this.open = true;
                this.title = "添加项目投标执行/审核";
            });
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            this.workflowOption.workflowId = row.workflowId;
            this.workflowOption.workflowName = row.workflowName;
            this.projectOption.projectId = row.projectId;
            this.projectOption.projectName = row.projectName;
            this.workflowOptions.push(this.workflowOption);
            this.projectOptions.push(this.projectOption);
            const processId = row.processId || this.ids;
            getBid_project_process(processId).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改项目投标执行/审核";
            });
        },
        getRowKeys(row) {
            return row.processId + row.pointName;
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.processId != null) {
                        updateBid_project_process(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                    else {
                        activeBid_project_process(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const processIds = row.processId || this.ids;
            this.$modal.confirm("是否确认删除？").then(function () {
                return delBid_project_process(processIds);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        handleApprove(row) {
            getBid_project_process_step(row.projectId).then(response => {
                this.active = response.data.currentBidStep;
                this.singleStepData = response.data.bidProjectWorkflowPointList;
                this.approveForm = response.data;
                this.$set(this.approveForm, "projectId", row.projectId);
                this.openApprove = true;
                this.approveTitle = "执行/审核";
                this.queryOnlyListParams.pageNum = 1;
                this.queryOnlyListParams.projectId = row.projectId;
                this.processStatus = row.stepStatus;
                this.fileList = this.singleStepData[this.active] ? this.singleStepData[this.active].filePath : "";
                this.getOnlyList();
                this.creatorPermi=row.creator_permi;
                this.auditorPermi=row.auditor_permi;
            });
        },
        next() {
            console.log(this.processStatus);
            addBid_project_process({ "projectId": this.approveForm.projectId, "workflowId": this.approveForm.workflowId, "pointId": this.approveForm.bidProjectWorkflowPointList[this.active].pointId, "step": 0, "excuteTime": this.approveForm.excuteTime, "bid": this.approveForm.isBid }).then(response => {
                this.processStatus = "finish";
                this.$modal.msgSuccess("执行成功");
                this.open = false;
                this.getList();
                this.queryOnlyListParams.pageNum = 1;
                this.queryOnlyListParams.projectId = this.approveForm.projectId;
                this.getOnlyList();
            });
        },
        // back() {
        // let checkStatus = this.$confirm(`审核是否通过？`);
        // let tempStep = checkStatus?1:-1;
        // addBid_project_process({"projectId":this.approveForm.projectId,"workflowId":this.approveForm.workflowId,
        //                        "step":tempStep,
        //                         "excuteTime":this.approveForm.excuteTime}).then(response => {
        //       this.$modal.msgSuccess("撤回成功");
        //       this.open = false;
        //       this.getList();
        //       this.queryOnlyListParams.pageNum=1;
        //       this.queryOnlyListParams.projectId=this.approveForm.projectId;
        //       this.getOnlyList();
        //     });
        // this.$confirm('审核是否通过？', '审核', {
        //   distinguishCancelAndClose: true,
        //   confirmButtonText: '通过',
        //   cancelButtonText: '不通过',
        //   type: 'warning',
        // }).then(() => {
        back() {
            this.checkOpen = true;
        },
        checkYes() {
            checkBid_project_process({ "projectId": this.approveForm.projectId, "workflowId": this.approveForm.workflowId, "pointId": this.approveForm.bidProjectWorkflowPointList[this.active].pointId, "step": 1, "excuteTime": this.approveForm.excuteTime }).then(response => {
                this.active++;
                this.processStatus = "process";
                this.$modal.msgSuccess("审核通过");
                this.checkOpen = false;
                this.getList();
                this.queryOnlyListParams.pageNum = 1;
                this.queryOnlyListParams.projectId = this.approveForm.projectId;
                this.getOnlyList();
                this.fileList = this.singleStepData[this.active] ? this.singleStepData[this.active].filePath : "";
            });
        },
        checkNo() {
            checkBid_project_process({ "projectId": this.approveForm.projectId, "workflowId": this.approveForm.workflowId, "pointId": this.approveForm.bidProjectWorkflowPointList[this.active].pointId, "step": -1, "excuteTime": this.approveForm.excuteTime }).then(response => {
                this.$modal.msgSuccess("审核不通过");
                this.processStatus = "error";
                this.checkOpen = false;
                this.getList();
                this.queryOnlyListParams.pageNum = 1;
                this.queryOnlyListParams.projectId = this.approveForm.projectId;
                this.getOnlyList();
            });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download("business/bid_project_process/export", {
                ...this.queryParams
            }, `bid_project_process_${new Date().getTime()}.xlsx`);
        }
    },
    components: { FileUpload }
};
</script>
<style lang="scss" scoped>
.down-arrow {
  color: #47da2a;
}
.up-arrow {
  fill: #d64e18;
}

.myColor >>> .el-breadcrumb__inner{
  background-color: #e8f4ff;
  border-color: #d1e9ff;
  display: inline-block;
  height: 32px;
  padding: 0 10px;
  line-height: 30px;
  font-size: 12px;
  color: #1890ff;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
}
</style>
